/**
 * 分类栏目
 */
import React, {Component} from 'react';
import {View, StyleSheet, Text, Image, TouchableOpacity, Animated} from  'react-native';
import ClassificationDetailView from './ClassificationDetailView';
let beer = require('../../img/classification/class_beer.jpg');
let drink = require('../../img/classification/class_drink.jpg');
let red_wine = require('../../img/classification/class_red_wine.jpg');
let wine = require('../../img/classification/class_wine.jpg');
let white_wine = require('../../img/classification/class_white_wine.jpg');
export default class ClassificationView extends Component {
    constructor(props) {
        super(props);
        this.state = {
            fadeAnim: new Animated.Value(0)
        };
        this.classification = [
            {
                title: '啤酒',
                img: beer,
                url: 'https://h5.youzan.com/v2/feature/1ezgkmeuj?reft=1494317548973_1494318344936&spm=f44838959_f44930604&sf=wx_menu'
            },
            {
                title: '红酒',
                img: red_wine,
                url: 'https://h5.youzan.com/v2/feature/j7esr5hl?reft=1494317548973_1494318663229&spm=f44838959_f44930604&sf=wx_menu'

            },
            {
                title: '白酒',
                img: white_wine,
                url: 'https://h5.youzan.com/v2/feature/6ib2kuvx?reft=1494317548973_1494318697131&spm=f44838959_f44930604&sf=wx_menu'
            },
            {
                title: '洋酒',
                img: wine,
                url: 'https://h5.youzan.com/v2/feature/1ka4l0mz?reft=1494317548973_1494318714479&spm=f44838959_f44930604&sf=wx_menu'
            }, {
                title: '饮料',
                img: drink,
                url: 'https://h5.youzan.com/v2/feature/1idl7xk11?reft=1494317548973_1494318729006&spm=f44838959_f44930604&sf=wx_menu'
            }
        ];
    }

    componentDidMount() {
        Animated.spring(
            this.state.fadeAnim,//初始值
            {
                toValue: 1,
                friction:1,
                tension:20,
                duration:2000
            }//结束值
        ).start();//开始
    }
    render(){
        return (
            <View style={styles.container}>
                {this.renderAllItem()}
            </View>
        )
    }
    renderAllItem() {
        let itemArr = [];
        let classData = this.classification;
        for (let i = 0; i < classData.length; i++) {
            let data = classData[i];
            let params={type:this.classification[i].title,fun:(title,component,param)=>this.props.popToHomeView(title,component,param)};
            itemArr.push(
                <TouchableOpacity onPress={()=>{this._press('ClassificationDetailView',params)}} key={i}>
                    <View style={styles.innerViewStyle}>
                        <Animated.Image source={data.img} style={{width:30,height:30,resizeMode:'stretch',opacity: this.state.fadeAnim}}/>
                        <Text>{data.title}</Text>
                    </View>
                </TouchableOpacity>
            )
        }
        return itemArr;
    }

    _press(componentName,param) {
        if (this.props.popToHomeView == null) return;
        this.props.popToHomeView(componentName,param);
    }

    static navigationOptions = ({navigation}) => ({
        title: navigation.state.params.title,
    });
}


const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: 'white',
        justifyContent: 'space-around'
    },
    innerViewStyle: {
        width: 70,
        height: 70,
        justifyContent: 'center',
        alignItems: 'center'
    }
});
